<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目列表</title>
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/topic_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/commom.js"></script>
    <style>
      a{
        text-decoration: none;
        color: inherit;
      }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">LP-OJ</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <!-- <a href="blog_list.html">主页</a> -->
        <a href="/blog_list.html">创作中心</a>
        <a href="/mycenter.html">个人中心</a>
        <a href="/login.html">登陆</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->
            <div id="artListDiv">
                <table>
                    <thead>
                        <th>序号</th>
                        <th style="width: 530px;">题目</th>
                        <th>等级</th>
                        <th>思路</th>
                        <th>通过率</th>
                      </tr>
                    </thead>
                    <tbody>
                        <!-- <tr>
                          <td>1</td>
                          <td><a href="/topic_detail.html">翻转链表</a></td>
                          <td>简单</td>
                          <td>思路</td>
                          <td>55.32%</td>
                        </tr> -->
                    </tbody>
                  </table>
                
            </div>
            <hr>
            <div class="blog-pagnation-wrapper">
                <button onclick="goFirstPage()" class="blog-pagnation-item">首页</button> 
                <button onclick="goBeforePage()" class="blog-pagnation-item">上一页</button>  
                <button onclick="goNextPage()" class="blog-pagnation-item">下一页</button>
                <button onclick="goLastPage()" class="blog-pagnation-item">末页</button>
            </div>
        </div>
        </div>
    <script>
        // 获取题目列表
        //当前页码
        var index = 1;
        //当前可显示的最大条数
        var Msize = 5;
        //当前最大页码数
        var pcount = 1;
        //尝试获取url中当前页码数
        index = (getUrlValue("index")==""?1:getUrlValue(index));
        //交互开始获取题目
        function initListPage() {
          jQuery.ajax({
            url:"/topic/topicList",
            type:"POST",
            data:{"index":index,"size":Msize},
            success:function(result) {
              if(result != null && result.code == 200 && result.data.list.length > 0) {
                var listhtml = "";
                for(var i = 0;i<result.data.list.length;i++) {
                  var topicData = result.data.list[i];
                  listhtml += '<tr>';
                  listhtml += '<td>'+topicData.id+'</td>'; 
                  listhtml += '<td><a href="topic_detail.html?id='+ topicData.id + '">' + topicData.title+'</a></td>'; 
                  listhtml += '<td>'+topicData.level+'</td>'; 
                  listhtml += '<td>'+topicData.thinking+'</td>'; 
                  listhtml += '<td>'+topicData.passRate+'</td>'; 
                  listhtml += '</tr>';
                }
                jQuery("tbody").html(listhtml);
                pcount = result.data.pcount;
              }
            }
          });
        }
        initListPage();
        
        //跳转页数
        function goFirstPage() {
          if(index <= 1) {
            alert("当前已经在首页了");
            return;
          }
          location.href="topic_list.html";
        }
        function goBeforePage() {
          if(index <= 1) {
            alert("没有上一页了哦");
            return;
          }
          index--;
          location.herf="topic_list.html?index="+index;
        }
        function goNextPage() {
          if(index >= pcount) {
            alert("没有下一页了哦");
            return;
          }
          index++;
          location.herf="topic_list.html?index="+index;
        }
        function goLastPage() {
          if(index >= pcount) {
            alert("当前已经在末页了");
            return;
          }
          location.herf="topic_list.html?index="+pcount;
        }

    </script>
</body>
</html>